<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>全国青少年电子信息智能创新大赛</title>
	<link rel="icon" href="./images/logo.png">
	<link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
	<link rel="stylesheet" href="./lib/layui/css/layui.css">
	<link rel="stylesheet" href="./css/notice.css">
	<link rel="stylesheet" href="./lib/layui/css/modules/layer/default/layer.css">
	<script src="./js/jquery.min.js"></script>
	<script src="./lib/layui/layui.js"></script>
	<script src="./lib/layui/lay/modules/layer.js"></script>
</head>
<body>
<section class="wrapper" v-cloak>
	<common-header active-path="notice.html"></common-header>
	<section class="banner" style="background-image: url(./images/about-banner.png);">
	</section>
	<section class="content">
		<section class="container">
			<section class="notice-title">赛项说明</section>
			<section class="notice-list">
				<section v-if="list.length > 0">
					<section class="notice-item" v-for="item in list">
						<section class="img" :style="{backgroundImage: 'url(' + item.mainImg + ')'}"></section>
						<section class="details">
							<section class="title">
								{{ item.title }}
								<section class="tag" v-if="unReadIds.indexOf(item.id) !== -1">未读</section>
								<section v-if="item.sortId > 0" class="top">置顶</section>
							</section>
							<section class="text">
								{{ item.introduction | substr}}
							</section>
							<section class="time">
								{{ formatTime(item.createTime) }}
								<a :href="'./notice-details.html?id=' + item.id ">查看详情</a>
							</section>
						</section>
					</section>
				</section>
				<Empty v-else text="暂无通知公告哦" v-else></Empty>
<!--				<section class="notice-item">-->
<!--					<section class="img"></section>-->
<!--					<section class="details">-->
<!--						<section class="title">-->
<!--							电子控制工程赛-->
<!--							<section class="tag is-read">已读</section>-->
<!--						</section>-->
<!--						<section class="text">-->
<!--							2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大-->
<!--							赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召...-->
<!--						</section>-->
<!--						<section class="time">-->
<!--							2019/09/23-2020/06/20-->
<!--							<a href="./notice-details.html">查看详情</a>-->
<!--						</section>-->

<!--					</section>-->
<!--				</section>-->
<!--				<section class="notice-item">-->
<!--					<section class="img"></section>-->
<!--					<section class="details">-->
<!--						<section class="title">-->
<!--							电子控制工程赛-->
<!--							<section class="tag is-read">已读</section>-->
<!--						</section>-->
<!--						<section class="text">-->
<!--							2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大-->
<!--							赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召...-->
<!--						</section>-->
<!--						<section class="time">-->
<!--							2019/09/23-2020/06/20-->
<!--							<a href="./notice-details.html">查看详情</a>-->
<!--						</section>-->

<!--					</section>-->
<!--				</section>-->
<!--				<section class="notice-item">-->
<!--					<section class="img"></section>-->
<!--					<section class="details">-->
<!--						<section class="title">-->
<!--							电子控制工程赛-->
<!--							<section class="tag">未读</section>-->
<!--						</section>-->
<!--						<section class="text">-->
<!--							2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大-->
<!--							赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召2019全国青少年电子信息智能创新大赛辽宁赛区培训会顺利召...-->
<!--						</section>-->
<!--						<section class="time">-->
<!--							2019/09/23-2020/06/20-->
<!--							<a href="./notice-details.html">查看详情</a>-->
<!--						</section>-->

<!--					</section>-->
<!--				</section>-->
			</section>
			<section id="page" v-if="total > 0"></section>
	</section>
	</section>
	<common-footer></common-footer>
</section>
<script src="./lib/swiper/js/swiper.min.js"></script>

<script src="./lib/layui/layui.js"></script>
<script src="./js/vue.min.js"></script>
<script src="../js/abkj/fun_tool.js"></script>
<script src="../js/abkj/slAjax.js"></script>
<script src="../js/abkj/match/api/webinfo.js"></script>
<script src="../js/abkj/match/api/mail.js"></script>
<script src="../js/abkj/match/api/news.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="../js/abkj/ext/news.js"></script>
<script src="./js/common.js"></script>
<script src="./components/index.js"></script>
<script>
	$(function () {
		var vm = new Vue({
			el: '.wrapper',
			data: {
				currTab: 1,
				page: 1,
				total: 0,
				laypage: null,
				list: [],
				userInfo: tool.getUserInfo(),
				unReadIds: []
			},
			mounted: function () {
				this.getData()
				var vm = this
				this.userInfo && ClientNewsgetUnReadNum('', function (data) {
					vm.unReadIds = data
				}, function () {})
			},
			methods: {
				getData: function () {
					var vm = this
					ClientNewsPageList3(
						{page: {current: this.page, size: 10},cond:{
							eq:{modelName:"赛项说明"}
							,
		                    order:{ //排序条件
		                    	type:"desc",
		                    	attrName:["sort_id","create_time"]
		                    }
						}},
						function (data) {
							vm.total = data.total
							vm.list = data.records
							if (!layui.laypage) {
								layui.use(['laypage'], function () {
									layui.laypage.render({
										elem: 'page',
										count: vm.total,
										limit: 10,
										jump: function (obj, first) {
											if (first) return
											vm.page = obj.curr
											vm.getData()
										}
									})
								})
							}
						},
						function (err) {
							console.log(err)
						})
				},
				formatTime: function (time) {
					if (!time) return time
					return time.split('T')[0]
				},
			}
		})
	})
</script>
</body>
</html>
